<template>
  <div>

    <div class="login-logo">
      <img class="login-img" src="//award.xmcdn.com/yx/fe-passport/last/dist/images/new-logo-m@2x_2909eca.png" alt="">
    </div>

    <van-tabs v-model:active="active" class="logintabs">
      <van-tab title="验证码登录" class="logintabs-1">
        <van-cell-group inset>
          <van-field v-model="phone" required label="手机号" placeholder="请输入手机号" @blur="Verification" />
          <div class="content">
            <label>验证码:</label>
            <input v-model="code" type="text" placeholder="请输入验证码" />
          </div>
        </van-cell-group>
      </van-tab>
      <van-tab title="密码登录" class="logintabs-2">
        <van-cell-group inset>
          <van-field v-model="phone" erro required label="手机号" placeholder="请输入手机号" />
          <van-field v-model="password" required label="密码" placeholder="请输入密码" />
        </van-cell-group>
      </van-tab>
    </van-tabs>


    <van-button round type="default" size="large" color="#ddd"
      :class="phone && password ? 'button' : 'button2'" @click="getlogin">登录</van-button>

    <div class="user">
      <input type="radio">
      <span>首次登录会自动创建新账号，且代表同意</span>
      <a href="/page/register_rule" class="em">《用户服务协议》</a>
      <span>和</span>
      <a href="/page/privacy_policy" class="em">《隐私政策》</a>
    </div>


    <div class="loginmode">
      <div>登录方式</div>
      <hr>
    </div>


    <div class="icon">
      <van-icon size="50px" class="icon-qq" color="blue" name="qq" />

      <van-icon size="50px" class="icon-weixin" color="green" name="wechat" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { reqGetCode, reqlogin } from "@/api/search"
import router from '@/router';
import { showNotify } from 'vant';
const password = ref('')
// const username = ref('')
const phone = ref('')
const active = ref(0);
const value = ref('123');
const errorInfo = ref('');
const code = ref<number>()

// 获取验证码
const Verification = async () => {
  try {
    let result = await reqGetCode(phone.value);
    console.log(result);
    code.value = result.data.data
  } catch (error) {

  }
}
// 登录
const loginParams = ref<any>({
  phone: '',
  password: ''
})
const getlogin = async () => {

  loginParams.value.phone = phone.value
  loginParams.value.password = password.value
  // 获取用户名 密码
  try {
    let result = await reqlogin(loginParams.value);
    if (result.data.code == 200) {
      showNotify({ type: 'success', message: '登录成功' });
      localStorage.setItem("TOKEN", result.data.data.token)
      router.push("/")
    } else {
      showNotify('账号或密码错误');
    }
  } catch (error) {
    console.error(error)
  }
}





watch(value, (newVal) => {
  if (newVal.length === 6 && newVal !== '123456') {
    errorInfo.value = '密码错误';
  } else {
    errorInfo.value = '';
  }
});




</script>

<style lang="less" scoped>
.login-logo {
  width: 100%;

  .login-img {
    width: 50%;
    margin-top: 30px;
    margin-left: 100px;
    margin-bottom: 20px;
  }
}

.logintabs {
  .logintabs-1 {
    margin-top: 20px;

    .content {
      margin-left: 20px;
    }
  }

  .logintabs-2 {
    margin-top: 20px;
  }
}

.button {
  margin-top: 20px;
}

.button2 {
  margin-top: 20px;
  color: orangered;
}

.user {
  font-size: 12px;
  padding: 20px 40px;
  text-align: center;

  .em {
    color: red;
  }
}

.loginmode {
  text-align: center;
  margin-top: 100px;
  color: #999;
}

.icon {
  margin-left: 100px;

  .icon-qq {
    margin-right: 70px;
  }
}
</style>